<template>
  <div class="contents">
    <PanelTitle title="品种分布" />
    <div class="mt">
      <div class="right-title">单位：亩</div>
      <div style="height: 20vh;">
        
        <div class="tr">
          <div class="th" style="width: 40%;">地区</div>
          <div class="th" style="width: 30%;">种植面积</div>
          <div class="th" style="width: 30%;">种植品种</div>
        </div>

        <loopScroll class="scroll-table">
          <div class="tr" v-for="item in listData">
            <div class="td" style="width: 40%;">{{ item.villageName }}</div>
            <div class="td" style="width: 30%;">{{ item.acreage }}</div>
            <div class="td" style="width: 30%;">{{ item.varietyName }}</div>
          </div>
        </loopScroll>

      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import http from "@/api/http";
import { env } from "@/utils/env";
import PanelTitle from "../../component/PanelTitle.vue";

import loopScroll from "@/components/loopScroll.vue";
let listData = ref([]);


onMounted(async () => {
  let res = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/monitor/variety/distribution/statist/list",
    method: "get",
    params: { yearly: new Date().getFullYear() },
  });
  listData.value = res.data;
});
</script>

<style scoped lang="scss">
.contents {
  background: linear-gradient(to bottom,
      rgba(5, 79, 99),
      rgba(5, 79, 99, 0.1),
      rgba(5, 79, 99));
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);

  .mt {
    margin-top: vh(-40);
    padding: 0 vw(15);
  }
}

table,
td,
tr,
th {
  border: vh(1) solid #2cd7bc;
  border-collapse: collapse;
  font-size: vh(9);
}

table {
  width: 100%;
}



.right-title {
  color: #fff;
  font-size: vh(11);
  font-weight: bold;
  text-align: right;
  margin: vh(6) 0;
}

.scroll-table {
  height: 15vh;
  overflow-y: hidden;
}
.tr{
  display: flex;
}
.th {
  color: #fff;
  background: linear-gradient(to bottom,
      rgba(50, 200, 167, 0.45),
      rgba(50, 200, 167, 0.05));
  font-size: vh(10);
  padding: vh(6) 0;
  text-align: center;
  box-sizing: border-box;
  border-left: vh(1) solid #2cd7bc;
  border-bottom: vh(1) solid #2cd7bc;
  border-top: vh(1) solid #2cd7bc;
}
.tr .th:last-child {
  border-right: vh(1) solid #2cd7bc;
}
.tr .td:last-child {
  border-right: vh(1) solid #2cd7bc;
}

.td {
  font-size: vh(9);
  color: #fff;
  border-left: vh(1) solid #2cd7bc;
  border-bottom: vh(1) solid #2cd7bc;
  padding: vh(4) 0;
  text-align: center;
  box-sizing: border-box;
}
</style>